<!--
 * @Author: your name
 * @Date: 2021-04-02 13:42:58
 * @LastEditTime: 2021-05-21 19:09:29
 * @LastEditors: Please set LastEditors
 * @Description: 会议室进展 => 详情
 * @FilePath: /medicine-web/src/views/meeting/detail/index.vue
-->
<template>
  <div class="meeting-detail-container">
    <p class="document-detail__title font-pattern-5">
      {{artical.title}}
    </p>
    <p class="document-detail__author font-pattern-3" v-if="artical.author">
      第一作者: {{artical.author}}
    </p>
    <p class="document-detail__author font-pattern-3">
      <span v-if="artical.type">会议类型: {{artical.type}}</span>
      <span v-if="artical.meeting_no" style="margin-left: 40px">会议号: {{artical.meeting_no}}</span>
      <span v-if="artical.start_time && artical.end_time" style="margin-left: 40px">开展时间: {{artical.start_time}} ~ {{artical.end_time}}</span>
      <span v-if="artical.organization" style="margin-left: 40px">开展机构: {{artical.organization}}</span>
    </p>
    <!-- <p class="document-detail__author font-pattern-3">
      <span>临床注册号: {{artical.registration_no}}</span>
      <span style="margin-left: 40px">开展机构: {{artical.organization}}</span>
      <span style="margin-left: 40px">作者: {{artical.author}}</span>
    </p> -->
    <p style="margin-bottom: 1em" class="document-detail__center font-pattern-7 rich-text" v-html="'<p>' + '摘要: ' + artical.abstract + '</p>'">
    </p>
    <p class="document-detail__content font-pattern-10" v-if="artical.virus_type" style="margin-bottom: 1em;">
      溶瘤病毒类型：{{artical.virus_type}}
    </p>
    <p class="document-detail__content font-pattern-10" v-if="artical.tumor_type" style="margin-bottom: 1em;">
      肿瘤类型：{{artical.tumor_type}}
    </p>
    <p class="document-detail__content font-pattern-10" v-if="artical.inject_mode" style="margin-bottom: 1em;">
      给药方式：{{artical.inject_mode}}
    </p>
    <p class="document-detail__content font-pattern-10" v-if="artical.cure_method" style="margin-bottom: 1em;">
      联合疗法：{{artical.cure_method}}
    </p>
    <!-- <div class="document-detail__content font-pattern-3" v-if="artical.content">
      <p style="margin-bottom: 17px;" v-html="artical.content">
      </p>
    </div> -->
    <ul class="font-pattern-3 document-detail__link">
      <li style="margin-right: 36px;" v-if="artical.registration_no">临床注册号: {{artical.registration_no}}</li>
      <li v-if="artical.source_url">会议来源链接：<a :href="artical.source_url" target="_blank">{{artical.source_url}}</a></li>
    </ul>
    <!-- <p class="font-pattern-3" style="margin-top: 34px;" v-for="o in artical.annex" :key="o">{{o}}</p> -->
    <customBtn :btnStr="'下载'" @handClick="handleDownload(artical)"></customBtn>
    <customBtn :btnStr="'收藏'" @handClick="handleCollection"></customBtn>
    <a-popover v-model="showShare" trigger="click">
      <a slot="content" class="share-icon-list">
        <img style="width: 18px; height: 18px; cursor:pointer;" :src="require('@/assets/image/xinlang.png')" alt="" @click.stop="showXinLang(artical)">
        <img style="width: 18px; height: 18px; margin-left: 16px; cursor:pointer;" :src="require('@/assets/image/qq.png')" alt="" @click.stop="showQQ(artical)">
        <img style="width: 20px; height: 20px; margin-left: 16px; cursor:pointer;" :src="require('@/assets/image/wechat.png')" alt="" @click.stop="showWechat(artical)">
      </a>
      <customBtn :btnStr="'分享'" @handClick="handleShare"></customBtn>
    </a-popover>
    <div class="wechat-qr-code__container" v-if="showQRCode">
      <div class="wechat-qr-code__title">手机微信扫码分享</div>
      <img class="wechat-qr-code__close" :src="require('@/assets/image/close.png')" alt="" @click.stop="showQRCode = false">
      <div id="wechat-qr-code"></div>
    </div>
    <div class="wechat-qr-code__modal" v-if="showQRCode" @click.stop="showQRCode = false"></div>
    <p class="font-pattern-9" style="margin-top: 34px;" v-if="artical.annex && artical.annex.length && artical.annex[0] && artical.status == 1">
      Poster:
    </p>
    <div class="image-container" v-if="artical.annex && artical.annex.length && artical.annex[0] && artical.status == 1">
      <imageView :url="artical.annex && artical.annex.length > 0 ? this.$uploadUrl + artical.annex[0] : ''"></imageView>
    </div>
  </div>
</template>
<script>
import customBtn from '@/components/CustomBtn/index.vue'
import imageView from '@/components/ImageView/index.vue'
import { saveAs } from 'file-saver'
import share from '@/utils/share'
export default {
  name: 'metDetail',
  components: { customBtn, imageView },
  data () {
    return {
      showShare: false,
      showQRCode: false, // 生成二维码
      artical: {
        title: '', // 标题
        start_time: '', // 开始时间
        end_time: '', // 结束时间
        abstract: '', // 会议摘要【富文本】
        content: '', // 具体内容
        source_url: '', // 来源链接地址
        annex: [], // 附件地址
        meeting_no: '', // 会议号
        type: '', // 会议类型
        registration_no: '', // 临床注册号
        organization: '', // 开展机构
        author: '', // 作者
        status: 0, // 是否加蒙版效果
      }
    }
  },
  methods: {
   async handleDownload (rawData) {
     if (!this.getCookie('uid')) {
        this.msgInfo('您还没有登录，正在跳转至登录界面...')
        setTimeout(() => {
          this.$router.push('/login')
        }, 1500)
        return
      }
      if (this.artical.status != 1) {
        this.msgInfo('此文献尚未启用，无法下载')
        return
      }
      if (rawData && rawData.annex && rawData.annex.length > 0) {
        const download = await this.$action('doDownload', { user_id: this.getCookie('uid'), ids: this.$route.query.id, module: 2 })
        if (download) {
          // this.msgSuccess('下载成功')
          // saveAs(this.$uploadUrl + rawData.annex[0], rawData.annex[0].split('/')[rawData.annex[0].split('/').length - 1])
          this.$action('getFileBloc', { id: this.$route.query.id, user_id: this.getCookie('uid'), module: 2 })
        } else {
          this.msgSuccess('下载失败, 请稍后重试.')
        }
      } else {
        this.$message.info('暂无文件附件，无法下载。')
      }
    },
    async handleCollection () {
      if (!this.getCookie('uid')) {
        this.msgInfo('您还没有登录，正在跳转至登录界面...')
        setTimeout(() => {
          this.$router.push('/login')
        }, 1500)
        return
      }
      if (this.artical.status != 1) {
        this.msgInfo('此文献尚未启用，无法收藏')
        return
      }
      if (this.$route.query.id) {
        const res = await this.$action('doCollection', { user_id: this.getCookie('uid'), ids: this.$route.query.id, module: 2 })
        if (res) {
          this.msgSuccess('收藏成功')
        } else {
          this.msgError('收藏失败')
        }
      }
    },
    handleShare () {
      if (!this.getCookie('uid')) {
        this.msgInfo('您还没有登录，正在跳转至登录界面...')
        setTimeout(() => {
          this.$router.push('/login')
        }, 1500)
        return
      }
      if (this.artical.status != 1) {
        this.msgInfo('此文献尚未启用，无法分享')
        return
      }
      this.showShare = true
    },
    showXinLang (rawData) {
      if (rawData.source_url) {
        share.toShareXinLang(rawData.source_url, rawData.title)
      } else {
        this.msgInfo('此文章暂无原文链接， 无法进行分享')
      }
    },
    showQQ (rawData) {
      if (rawData.source_url) {
        share.toShareQQZone(rawData.source_url, rawData.title, rawData.data.abstract ? rawData.abstract.replace(/<[^>]+>|&[^>]+;/g, '') : '', '')
      } else {
        this.msgInfo('此文章暂无原文链接， 无法进行分享')
      }
    },
    showWechat (rawData) {
      if (rawData.source_url) {
        this.showQRCode = true
        share.toShareWeChat(rawData.source_url)
      } else {
        this.msgInfo('此文章暂无原文链接， 无法进行分享')
      }
    },
    async fetchData () {
      if (this.$route.query.id) {
        const res = await this.$action('getMeetingDetail', { id: this.$route.query.id })
        console.log('getMeetingDetail', res)
        this.artical.title = res.title ? res.title : ''
        this.artical.start_time = res.start_time ? res.start_time : ''
        this.artical.end_time = res.end_time ? res.end_time : ''
        this.artical.abstract = res.abstract ? res.abstract : ''
        this.artical.content = res.content ? res.content : ''
        this.artical.source_url = res.source_url ? res.source_url : ''
        this.artical.annex = res.annex ? res.annex : []
        this.artical.status = res.status || res.status == 0 ? res.status : null
        this.artical.meeting_no = res.meeting_no ? res.meeting_no : ''
        this.artical.type = res.type ? res.type : ''
        this.artical.registration_no = res.registration_no ? res.registration_no : ''
        this.artical.organization = res.organization ? res.organization : ''
        this.artical.author = res.author ? res.author : ''
        this.artical.virus_type = res.virus_type ? res.virus_type : ''
        this.artical.tumor_type = res.tumor_type ? res.tumor_type : ''
        this.artical.inject_mode = res.inject_mode ? res.inject_mode : ''
        this.artical.cure_method = res.cure_method ? res.cure_method : ''
      }
    }
  },
  mounted () {
    this.fetchData()
  }
}
</script>
<style lang="scss" scoped>
@import '~@/assets/styles/flex.scss';
@import '~@/assets/styles/common.scss';
@import '~@/assets/styles/qrcode.scss';
.meeting-detail-container {
  padding: 60px 0px 200px 0px;
  width: 1120px;
  margin: 0 auto;
  p {
    padding: 0;
    margin: 0;
  }
  .document-detail__title {
    width: 1120px;
    margin: 0 auto;
  }
  .document-detail__author {
    text-align: center;
    margin-top: 16px;
  }
  .document-detail__center {
    margin-top: 52px;
  }
  .document-detail__content {
    padding: 0px 0px;
  }
  .document-detail__link {
    @include flex-def;
    @include flex-cCenter;
  }
  /deep/ .a-btn-container {
    display: inline-block;
    margin-right: 17px;
    margin-top: 31px;
  }
  /deep/ .a-btn-container .btn-pattern {
    width: 89px;
    height: 35px;
    font-size: 14px;
    color: #fff;
    background-color: #10F1B5;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.21);
    word-spacing: 0px;
  }
  .image-container {
    margin: 72px 0px;
    height: 466px;
  }
  a {
    color: #1890ff;
  }
}
</style>
